<template>
    <div class="main">
        <div class="main_register">
            <div>
                <h1>五次方注册页面</h1>
                <div class="main_username">
                    <div class="main_username_1">手机号:</div>
                    <input v-model="userRegister.mobile" class="main_username_2" type="text">
                </div>
                <div class="main_password">
                    <div class="main_password_1">用户密码:</div>
                    <input v-model="userRegister.password" class="main_password_2" type="password">
                </div>
                <div class="main_confirm_password">
                    <div class="main_confirm_password_1">确认密码:</div>
                    <input v-model="userRegister.confirmPassword" class="main_confirm_password_2" type="password">
                </div>
                <div class="main_code">
                    <div class="main_code_1">验证码:</div>
                    <input v-model="userRegister.code" class="main_code_2" type="text">
                    <button @click="handleSendCode" class="main_code_3">发送验证码</button>
                </div>
                <div class="main_submit_btn">
                    <input @click="handleRegister" type="button" class="main_submit" value="提交">
                    <input @click="reset" type="reset" class="main_submit" value="重置">
                </div>
                <div @click="returnLogin" class="main_return_login">已有账号，返回登录页</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {mobileIsRegister, register, sendCode} from '@/api/register'
import {message} from "ant-design-vue";
import {UserRegister} from '@/model/loginAndRegister'
import router from "@/router";

//返回登录页
const returnLogin = () => {
    router.push("/login")
}

//注册需要的参数
const userRegister = ref<UserRegister>({
    mobile: '',
    password: '',
    confirmPassword: '',
    code: ''
})

//重置表单
const reset = () => {
    userRegister.value.mobile = ''
    userRegister.value.password = ''
    userRegister.value.confirmPassword = ''
    userRegister.value.code = ''
}

//注册
const handleRegister = () => {
    if (userRegister.value.mobile == '') {
        message.warn("手机号不能为空！")
    } else if (userRegister.value.password == '') {
        message.warn("密码不能为空！")
    } else if (userRegister.value.code == '') {
        message.warn("验证码不能为空！")
    } else if (userRegister.value.password != userRegister.value.confirmPassword) {
        message.warn("两次密码不一致！")
    } else {
        register(userRegister.value).then((res: any) => {
            if (res.data?.code == 200) {
                message.success("注册成功")
                router.push("/login")
            } else {
                message.error(res.data.message)
            }
        })
    }
}

//发送验证码
const handleSendCode = async () => {
    //手机号正则校验
    const reg = /^1[3-9]\d{9}$/
    if (userRegister.value.mobile == '') {
        message.warn("手机号不能为空")
    } else if (!reg.test(userRegister.value.mobile)) {
        message.warn("手机号格式不对")
    } else {
        const response = await mobileIsRegister(userRegister.value.mobile)
        if (response.data.code == 400) {
            message.warn(response.data.message)
        } else {
            sendCode(userRegister.value.mobile).then((res) => {
                if (res.data?.code == 200) {
                    message.success("发送成功")
                } else {
                    message.error(res.data.message)
                }
            })
        }

    }
}
</script>

<style lang="less" scoped>
.main {
  background: linear-gradient(#141e30, #243b55);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;

  .main_register {
    width: 37%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 350px;
    background-color: rgba(75, 81, 95, 0.3);
    box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
    border-radius: 5px;

    h1 {
      text-align: center;
      margin-bottom: 20px;
      margin-top: 20px;
      color: #f0edf3;
    }

    .main_username {
      display: flex;
      margin-bottom: 20px;

      .main_username_1 {
        width: 60px;
        margin-top: 2px;
        color: azure;
      }

      .main_username_2 {
        margin-left: 15px;
      }

      .main_username_2:focus {
        border-style: solid;
        border-color: #03a9f4;
        box-shadow: 0 0 15px #03a9f4;
      }
    }

    .main_password {
      display: flex;
      margin-bottom: 20px;

      .main_password_1 {
        width: 60px;
        margin-top: 2px;
        color: azure;
      }

      .main_password_2:focus {
        border-style: solid;
        border-color: #03a9f4;
        box-shadow: 0 0 15px #03a9f4;
      }

      .main_password_2 {
        margin-left: 15px;
      }
    }

    .main_confirm_password {
      display: flex;
      margin-bottom: 20px;

      .main_confirm_password_1 {
        width: 60px;
        margin-top: 2px;
        color: azure;
      }

      .main_confirm_password_2:focus {
        border-style: solid;
        border-color: #03a9f4;
        box-shadow: 0 0 15px #03a9f4;
      }

      .main_confirm_password_2 {
        margin-left: 15px;
      }
    }

    .main_code {
      display: flex;
      margin-bottom: 20px;

      .main_code_1 {
        width: 60px;
        margin-top: 2px;
        color: azure;
      }

      .main_code_2 {
        width: 90px;
      }

      .main_code_2:focus {
        border-style: solid;
        border-color: #03a9f4;
        box-shadow: 0 0 15px #03a9f4;
      }

      .main_code_2 {
        margin-left: 15px;
      }

      .main_code_3 {
        border-color: cornsilk;
        background-color: rgba(100, 149, 237, .7);
        color: aliceblue;
        border-style: hidden;
        border-radius: 5px;
        width: 96px;
        height: 31px;
        font-size: 16px;
        margin-left: 5px;
        cursor: pointer;
      }
    }

    .main_submit_btn {
      text-align: center;

      .main_submit {
        border-color: cornsilk;
        background-color: rgba(100, 149, 237, .7);
        color: aliceblue;
        border-style: hidden;
        border-radius: 5px;
        width: 100px;
        height: 31px;
        font-size: 16px;
        cursor: pointer;
        margin: 0 5px;
      }
    }

    .main_return_login {
      text-align: center;
      margin: 10px 0 20px;
      cursor: pointer;
    }

    .main_return_login:hover {
      color: red;
    }
  }
}

input,
select {
  //margin-left: 15px;
  border-radius: 5px;
  border-style: hidden;
  height: 30px;
  width: 190px;
  background-color: rgba(216, 191, 216, 0.5);
  outline: none;
  color: #f0edf3;
  padding-left: 10px;
}
</style>